<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>概况</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="./css/merchant.css">
</head>
<body>
<div id="backstage" class="layui-layout layui-layout-admin">
    <union-header :header="header"></union-header>
    <uniocn-side :side="side"></uniocn-side>
    <div class="layui-body">
        <div class="finance-com">
            <div style="margin-bottom: 30px">
                <p class="surveyTitle">财务概况</p>
                <ul class="finance-ul">
                    <li class="finance-li">
                        <div class="surveyBox">
                            <p class="box-table">
                                <span>进账</span>
                                <button class="layui-btn layui-btn-primary layui-btn-sm btnLeft">进</button>
                            </p>
                            <p class="box-table">
                                <span>出账</span>
                                <button class="layui-btn layui-btn-primary layui-btn-sm btnRight">出</button>
                            </p>
                        </div>
                        <div class="box-com">
                            <div class="box-table2">
                                <span class="allEnter">8.88</span>
                                <p class="allLeft">商户总进账</p>
                            </div>
                            <div class="box-table2">
                                <span class="allPay">1.23</span>
                                <p class="allRight">退款+结算</p>
                            </div>
                        </div>
                    </li>
                    <li class="finance-li">
                        <div class="surveyBox">
                            <p class="box-table" style="width: 100%;">
                                <span>结算</span>
                                <button class="layui-btn layui-btn-primary layui-btn-sm btnLeft">结</button>
                            </p>
                        </div>
                        <div class="box-com">
                            <div class="box-table2">
                                <span class="allEnter">8.88</span>
                                <p class="allLeft">已结算</p>
                            </div>
                            <div class="box-table2">
                                <span class="allPay">1.23</span>
                                <p class="allRight">待结算</p>
                            </div>
                        </div>
                    </li>
                    <li class="finance-li">
                        <div class="surveyBox">
                            <p class="box-table" style="width: 100%;">
                                <span>提成</span>
                                <button class="layui-btn layui-btn-primary layui-btn-sm btnLeft">提</button>
                            </p>
                        </div>
                        <div class="box-com">
                            <div class="box-table2">
                                <span class="allEnter">8.88</span>
                                <p class="allLeft">商家提成</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div style="margin-bottom: 30px">
                <p class="surveyTitle">运营概况</p>
                <ul class="finance-ul">
                    <li class="finance-li">
                        <div class="surveyBox">
                            <p class="box-table">
                                <span>VIP会员</span>
                                <button class="layui-btn layui-btn-primary layui-btn-sm btnLeft">总</button>
                            </p>
                            <p class="box-table">
                                <span>商户</span>
                                <button class="layui-btn layui-btn-primary layui-btn-sm btnRight">总</button>
                            </p>
                        </div>
                        <div class="box-com">
                            <div class="box-table2">
                                <span class="allEnter">8.88</span>
                                <p class="allLeft">vip数量</p>
                            </div>
                            <div class="box-table2">
                                <span class="allPay">1.23</span>
                                <p class="allRight">商户数量</p>
                            </div>
                        </div>
                    </li>
                    <li class="finance-li">
                        <div class="surveyBox">
                            <p class="box-table" style="width: 100%;">
                                <span>访问人数</span>
                                <button class="layui-btn layui-btn-primary layui-btn-sm btnLeft">今天</button>
                            </p>
                        </div>
                        <div class="box-com">
                            <div class="box-table2">
                                <span class="allEnter">8.88</span>
                                <p class="allLeft">浏览量/PV</p>
                            </div>
                            <div class="box-table2">
                                <span class="allPay">1.23</span>
                                <p class="allRight" style="color: #5abb55;">独立访客/UV</p>
                            </div>
                        </div>
                    </li>
                    <li class="finance-li">
                        <div class="surveyBox">
                            <p class="box-table" style="width: 100%;">
                                <span>访问人次</span>
                                <button class="layui-btn layui-btn-primary layui-btn-sm btnLeft">总</button>
                            </p>
                        </div>
                        <div class="box-com">
                            <div class="box-table2">
                                <span class="allEnter">8.88</span>
                                <p class="allLeft">浏览量/PV</p>
                            </div>
                            <div class="box-table2">
                                <span class="allEnter">8.88</span>
                                <p class="allRight" style="color: #5abb55;">独立访客/UV</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div style="margin-bottom: 30px">
                <p class="surveyTitle">常用插件</p>
                <ul class="finance-ul">
                    <li class="finance-li commonlyUsed" style="background: #84d089" v-for="item in commonlyUsed">
                        <p style="font-size: 18px;">{{item.type}}</p>
                        <div style="margin: 15px 0 25px 0">{{item.com}}</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
<script src="layui/layui.js"></script>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/vue2.5.16.js"></script>
<script src="./js/public.js"></script>
<script src="./js/data.js"></script>
<script>
    new Vue({
        el: "#backstage",
        data: {
            header: data.header,
            side: data.side,
            commonlyUsed:[
                {
                    type:"会员卡",
                    com:"一张集吃喝玩乐一体的电子虚拟卡,一卡在手,优惠我有"
                },{
                    type:"会员卡",
                    com:"一张集吃喝玩乐一体的电子虚拟卡,一卡在手,优惠我有"
                },
            ]
        }
    })
</script>
</html>